<script setup lang="ts">
  import { getLoginLogApi } from '@/api/user';
  import { BasicTable, useTable } from '@/components/Table';
  import dayjs from 'dayjs';

  const [register] = useTable({
    title: '登录日志',
    bordered: true,
    striped: true,
    showTableSetting: true,
    api: getLoginLogApi,
    canResize: true,
    columns: [
      {
        title: '记录ID',
        dataIndex: 'id',
        width: 100,
      },
      {
        title: '执行账号',
        dataIndex: 'username',
      },
      {
        title: '登录端类型',
        dataIndex: 'app',
      },
      {
        title: '执行日志',
        dataIndex: 'context',
        resizable: true,
      },
      {
        title: '操作系统',
        dataIndex: 'os',
      },
      {
        title: '浏览器标识',
        dataIndex: 'useragent',
      },
      {
        title: '是否移动端',
        dataIndex: 'mobile',
      },
      {
        title: '操作IP',
        dataIndex: 'ip',
      },
      {
        title: '操作时间',
        dataIndex: 'create_time',
      },
    ],
    useSearchForm: true,
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: 'app',
          component: 'Select',
          label: '登录端类型',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [
              {
                value: 'ALL',
                label: '全部',
              },
              {
                value: 'PC',
                label: 'PC端',
              },
              {
                value: 'H5',
                label: '移动端',
              },
              {
                value: 'APP',
                label: 'APP',
              },
            ],
          },
        },
        {
          field: 'mobile',
          component: 'RadioGroup',
          label: '是否移动端',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [
              { label: '是', value: '1' },
              { label: '否', value: '0' },
            ],
          },
        },
        {
          field: 'context',
          component: 'Input',
          label: '执行日志',
          colProps: {
            span: 6,
          },
        },
      ],
    },
  });
</script>

<template>
  <main>
    <a-row :gutter="16">
      <a-col :span="24">
        <BasicTable @register="register">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'create_time'">
              {{ dayjs(record.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
            <template v-if="column.dataIndex === 'mobile'">
              {{ record.mobile == '1' ? '是' : '否' }}
            </template>
          </template>
        </BasicTable>
      </a-col>
    </a-row>
  </main>
</template>
